<template>
  <article class="page">
    <headerbar :hideBtn="true">
      <div class="name-and-search">
        <span class="name">e支部</span>
        <!--          <div class="search-wrap">
                    <searchBox :hideScan="true"></searchBox>
                  </div>-->
      </div>
    </headerbar>
    <section>
      <div class="select-box">
        <div class="btn-box">
          <input
            class="select-btn"
            type="text"
            v-model="srarchDate.name"
            placeholder="请输入党组织名称"
          />
          <img src="../../../../static/images/select.png" alt=""/>
        </div>
        <div class="btn-box">
          <input
            class="select-btn"
            type="text"
            v-model="srarchDate.pname"
            placeholder="上一级党组织名称"
          />
          <img src="../../../../static/images/select.png" alt=""/>
        </div>
        <span @click="searchBtn">搜索</span>
      </div>
      <section v-if="!isShowList && swipeList.length===0" class="area_list">
        <div class="flex-my">
          <div class="title"></div>
          <div class="right" v-if="recordList.length > 0" @click="removeSearchRecord('all')">全部清除</div>
        </div>
        <div class="clearfix">
          <div
            class="item"
            v-for="(data, index) in recordList"
            :key="index"
            @click="showMore(data)"
          >
            <!--            <div class="icon-time">
                          <img
                            src="../../../../static/images/dangjian/home/icon-time.png"
                            alt=""
                          />
                        </div>-->
            <div class="history-item">
              <p class="zhibu">{{ data.name }}</p>
              <p class="pzhibu">上级党支部：{{ data.pname }}</p>
            </div>
            <div @click.stop="removeSearchRecord(index)" class="icon-colse">
              <img
                src="../../../../static/images/dangjian/home/icon-close-history.png"
                alt=""
              />
            </div>
          </div>
          <noData v-if="recordList.length === 0"></noData>
        </div>
        <!--        <p v-if="recordList.length > 0" @click="removeSearchRecord('all')" class="close_all">清除全部搜索记录</p>-->
      </section>
      <section v-if="isShowList" class="area_list">
        <cube-scroll
          ref="scroll"
          :options="options"
          :scrollEvents="['scroll-end']"
          @pulling-up="onPullingUp"
          @pulling-down="onPullingDown"
        >
          <div class="clearfix">
            <div
              class="item"
              v-for="(data, index) in swipeList"
              :key="index"
              @click="showMore(data)"
            >
              <!--            <div class="icon-time">
                            <img
                              src="../../../../static/images/dangjian/home/icon-time.png"
                              alt=""
                            />
                          </div>-->
              <div class="history-item">
                <p class="zhibu">{{ data.name }}</p>
                <p class="pzhibu">上级党支部：{{ data.pname }}</p>
              </div>
            </div>
            <noData v-if="!isLoading && swipeList.length === 0"></noData>
            <fetchData :loading="isLoading" :data="swipeList"></fetchData>
            <onBottom v-if="onBottom && swipeList.length>0"></onBottom>
          </div>
        </cube-scroll>
        <!--        <p v-if="recordList.length > 0" @click="removeSearchRecord('all')" class="close_all">清除全部搜索记录</p>-->
      </section>
      <!--      <section class="frame-content-sub relative no-bg">
              <mapComponent v-if="markers.length>0" :markersProp="markers"></mapComponent>
              &lt;!&ndash;<mapComponent :markersProp="markers"></mapComponent>&ndash;&gt;
            </section>-->
    </section>
    <dialogMore :title="'组织生活'" ref="dialog">
      <section>
        <section class="">
          <div class="icon-btns pdv-0 dialog">
            <div class="item" @click="goOrganizationalLife('shyk')">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/shyk.png" alt=""></i>
              <span class="text">三会一课</span>
            </div>
            <div class="item" @click="goOrganizationalLife('ztdr')">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/ztdr.png" alt=""></i>
              <span class="text">主题党日</span>
            </div>
            <div class="item" @click="goOrganizationalLife('mzpy')">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/mzpy.png" alt=""></i>
              <span class="text">民主评议</span>
            </div>
            <div class="item" @click="goNewTermReminder()">
              <i class="img"><img src="../../../../static/images/dangjian/dangwu/hjtx.png" alt=""></i>
              <span class="text">换届提醒</span>
            </div>
          </div>
        </section>
      </section>
    </dialogMore>
  </article>
</template>

<script>
import searchBox from '@/components/layout/searchBox.vue'
import mapComponent from '@/components/common/mapComponent.vue'
// import iconImg from '../../../../static/images/dangjian/dangwu/marker.png'
import StorageKeys from '@/common/const/StorageKeys'
import loginService from "@/service/loginService";
import dialogMore from '../../../components/layout/dialogMore.vue'

export default {
  name: 'eBranch',
  components: {searchBox, mapComponent,dialogMore},
  data() {
    return {
      list: [],
      markers: [],
      isShowList: false, //是否显示列表
      recordList: [],
      pageIndex: 1,//当前页码
      srarchDate: {//搜索条件
        name: '',//搜索的党组织名称
        pname: '',//上一级党组织名称
      },
      isLoading: false,
      swipeList: [],//党工委列表
      onBottom: false,
      options: {
        pullUpLoad: true,
        pullDownRefresh: {
          txt: ' '
        },
        scrollbar: false
      },
      shyk:'',//三会一课的参数
    }
  },
  watch: {
    /*'srarchDate.name':{
      deep:true,
      handler:function(newV,oldV){
        console.log('watch中：name',newV)
      }
    },
    'srarchDate.pname':{
      deep:true,
      handler:function(newV,oldV){
        console.log('watch中：pname',newV)
      }
    },*/
    srarchDate: {
      deep: true,
      handler: function (newVal, oldVal) {
        console.log('watch中：', newVal.name + newVal.pname);
        if (newVal.name === '' && newVal.pname === '') {
          this.isShowList = false;
          this.swipeList = []
        } else {
          this.isShowList = true;
          this.pageIndex = 1;
            this.searchBtn()
        }
      }
    }
  },
  created() {
    this.recordList = this.$localStorage.get(StorageKeys.EBRANCH_SEARCH_RECORD) || [];
  },
  methods: {
    onPullingDown() {
      console.log('onPullingDown')
      this.options.pullUpLoad = true
      // this.groupInfoClick()
      this.pageIndex = 1
      this.swipeList = []
      this.searchBtn()
    },
    onPullingUp() {
      this.searchBtn();
    },
    // 清空输入框
    removeKeyword() {
      this.srarchDate = "";
    },
   /* // 点击搜索记录
    setKeyword(data) {
      // this.srarchDate = data;
      this.isShowList = true;
    },*/
    goOrganizationalLife (type) {
      this.isShowList = true;
      this.addSearchRecord(this.shyk);
      this.$router.push({path: `/sanhuiyikeOther/${type}/${this.shyk.id}`,params:{}})
    },
    //打开三会一课
    showMore (data) {
      this.shyk = data;
      this.$refs.dialog.show()
    },
    // 搜索
    searchBtn(event) {
      this.onBottom = false;
      this.isLoading = true;
      if (this.srarchDate.name == "" && this.srarchDate.pname === "") {
        return this.tools.tip('请输入搜索内容');
      }
      let data = {//搜索条件
        name: this.srarchDate.name,//搜索的党组织名称
        pname: this.srarchDate.pname,//上一级党组织名称
        limit: 10,
        page: this.pageIndex,
        path: "0",
        ptype: "1",
      }
      loginService.getOsGroupPageByPathNew(data).then(res => {
        this.isLoading = false
        if (res.code !== 0) {
          return this.tools.alert(res.message || res.resp_msg)
        }
        this.isLoading = false
        this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
        if (this.pageIndex === 1) {
          this.swipeList = [];
        }
        this.swipeList = this.swipeList.concat(res.data);
        if (res.data.length === 0) {
          this.onBottom = true
          this.options.pullUpLoad = false
        }
        this.pageIndex++
        setTimeout(() => {
          this.$refs.scroll.forceUpdate && this.$refs.scroll.forceUpdate(true, false)
          this.options.isPullUpLoad = false
        }, 100)
      })
      /*this.$nextTick(() => {
        this.isShowList = true;
        this.addSearchRecord();
      })*/
    },
    // 添加最近搜索记录
    addSearchRecord(data) {
      console.log('showMore',data);
      this.recordList.unshift(data);
      this.recordList = this.uniqueById(this.recordList).slice(0, 10); //去重并只保留最近10次搜索记录
      this.$localStorage.set(StorageKeys.EBRANCH_SEARCH_RECORD, this.recordList);
      this.isShowList = false;
    },
    // 删除最近搜索记录
    removeSearchRecord(index) {
      if (index == 'all') {
        this.$createDialog({
          type: 'confirm',
          // icon: 'cubeic-alert',
          title: '温馨提示',
          content: '是否清空历史记录？',
          confirmBtn: {
            text: '确定',
            active: true,
            disabled: false,
            href: 'javascript:;'
          },
          cancelBtn: {
            text: '取消',
            active: false,
            disabled: false,
            href: 'javascript:;'
          },
          onConfirm: () => {
            this.recordList = [];
          },
          onCancel: () => {
          }
        }).show()
      } else {
        this.recordList.splice(index, 1);
      }
      this.$localStorage.set(StorageKeys.EBRANCH_SEARCH_RECORD, this.recordList)
    },
    // 过滤掉历史相同记录
    excludeSameRecord(list) {
      console.log("list=", list);
      return Array.from(new Set(list))
    },
    //根据id去重  By jingjian
    uniqueById(arr) {
      const res = new Map();
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1));
    },
  },
}
</script>
<style scoped lang="scss">
@import "@/common/stylus/moon.scss";

.select-box {
  width: 100%;
  height: 90px;
  background: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 2%;

  .state-box {
    position: relative;

    img {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: 16px;
      width: 20px;
    }

    .select {
      width: 2rem;
      height: 50px;
      line-height: 50px !important;
      padding-top: 0;
      padding-bottom: 0;
      margin-bottom: 0;
      background: #ffffff;
      border: 1px solid #9a9a9a !important;
      border-radius: 10px;

    }

    .yearClass {
      display: flex;
      align-items: center;
      padding-left: 8%;
      font-size: 14PX;
      font-family: 'PingFang SC', 'STHeitiSC-Light', 'Helvetica-Light', arial, sans-serif, 'Droid Sans Fallback';
    }
  }

  .btn-box {
    position: relative;
    width: 40%;

    .select-btn {
      width: 100%;
      height: 60px;
      background: #ffffff;
      border: 1px solid #9a9a9a;
      border-radius: 10px;
      margin-bottom: 0;
      padding: 10px 10px 10px 50px;
    }

    img {
      position: absolute;
      width: 25px;
      top: 50%;
      transform: translateY(-50%);
      left: 15px;
    }
  }

  span {
    font-size: 14PX;
    color: #fff;
    background: #e20002;
    padding: 3PX 7PX;
    border-radius: 10%;
  }
}

//搜索历史记录
.area_list {
  height: 89vh;
  padding: pxToRem(20px) pxToRem(15px);

  .flex-my {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title {
      font-size: 14PX;
      color: #000;
      margin: pxToRem(10px) 0;
      font-weight: bold;
    }

    .right {
      font-size: 14PX;
      color: #e20001;
    }
  }

  .close_all {
    font-size: 14PX;
    color: #ccc;
    margin: pxToRem(40px) 0 0;
    text-align: center;
  }

  .item {
    width: 100%;
    flex-shrink: 0;
    text-align: left;
    font-size: 14PX;
    color: #000;
    //background: rgba(171,144,144, $alpha: 0.15);
    background: #ebebef;
    margin-bottom: pxToRem(10px);
    padding: 20px pxToRem(54px);
    position: relative;
    //height: pxToRem(64px);
    line-height: pxToRem(70px);
    border-radius: 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    .icon-time, .icon-colse {
      position: absolute;
      top: 48%;
      transform: translateY(-50%);
      z-index: 3;
      width: pxToRem(26px);
      height: pxToRem(27px);

      img {
        @include fullImg();
      }
    }

    .history-item {
      .zhibu {
        color: #000000;
        font-size: 16PX;
        font-weight: bold;
        line-height: 0.6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;
      }

      .pzhibu {
        font-size: 14PX;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        word-break: break-all;
      }
    }

    .icon-time {
      left: pxToRem(16px);
    }

    .icon-colse {
      right: pxToRem(16px);
    }
  }
}
</style>
